Сайт стає більш цікавим і наочним, якщо його вебсторінки доповнити графічними зображеннями, а також застосувати гіперпосилання.

Встав/іяння малюнків

На вебсторінку сайту можна додавати різноманітні зображення.

Щоб вставити на вебсторінку малюнок з файлу, необхідно скористатися тегом <img src = "my.jpg">, де img — назва тегу, призначеного для вставляння зображення, src = "my.jpg" — атрибут, в якому вказується ім’я файлу з малюнком, що міститься в одній папці з HTML-файлом.

В атрибуті можна використовувати імена графічних файлів із розширеннями .jpg, .jpeg, .gif, .png або .bmp. Якщо малюнок і HTML-файл містяться в різних папках, то, крім імені файлу, потрібно вказувати шлях до нього із зазначенням назв відповідних папок.

Якщо малюнок міститься у вкладеній папці images:

<img src = "images/my.jpg">.

Якщо малюнок міститься у зовнішній папці images:

<img src = "../images/my.jpg">.

Для визначення способу розташування малюнка на вєбсторінці використовують певні атрибути тегу. Наведемо можливе розташування малюнка на вєбсторінці (див. рисунок) та обтікання його текстом.

Проаналізуємо декілька тегів для вставляння малюнків:

• малюнок з лівого краю, обтікання текстом праворуч:

<img src = "prl.png" align = "left">

• відстань між текстом і малюнком по вертикалі 10 пікселів, по горизонталі — ЗО пікселів:

• опис малюнка:

Примітка. Якщо навести вказівник на малюнок, з’явиться текст — Моє фото. Крім того, значення параметра alt буде виведене на екран замість малюнка, якщо у браузері вимкнуто показ малюнків.

• ширина малюнка 100 пікселів, висота — 20% від висоти робочої області вікна браузера:

• товщина рамки навколо малюнка — 5 пікселів:

Додавання гіперпоси/іань

Сайт складається з багатьох вебсторінок, пов’язаних гіперпосилан-нями, одна з яких є головною. Ця сторінка сайту зазвичай міститься у файлі index.html і відкривається першою. Для створення гіперпоси-лань на вебсторінки сайту та зовнішні ресурси інтернету використовують тег <а>...</а>.

Приклад додавання гіперпосилань до рисунків і фрагментів тексту. Нехай в одній папці з файлом index.html створено файл prf.html, який містить вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, яке матиме такий вигляд: <а href = "prf.html"> Подивитися фото </а>

Щоб гіперпосилання можна було додати до малюнка, необхідно вказати тег вставляння малюнка:

Після клацання напису Перша сторінка (Друга сторінка, Третя сторінка) відбудеться перехід за гіперпосиланням на відповідну вебсторінку.

Для повернення на головну сторінку на інших вебсторінках сайту мають бути відповідні гіперпосилання. Наприклад:

Питання для самоперевірки

1. Як вставити малюнок на вебсторінку?

2. У чому відмінність між значеннями атрибутів для вставлення малюнку із поточної, внутрішньої і зовнішньої папок?

3. Як вирівняти малюнок за правим краєм вікна браузера?

4. Як задати розмір малюнка? Що означає розмір у відсотках?

5. Як створити гіперпосилання?

6. Як додати до малюнка гіперпосилання на іншу вебсторінку?

Вправа 22

Створити вебсторінку сайту з малюнками і гіперпосиланнями.

1) Створіть папку з назвою Вправа 22. Знайдіть в інтернеті малюнок на шкільну тематику та збережіть його у створеній папці.

2) Створіть HTML-документ (головну сторінку сайту) із заголовком Розклад уроків. Додайте малюнок, збережений у папці, та текст (меню сайту): понеділок, вівторок, середа, четвер, п'ятниця. Збережіть створений документ з іменем index.html у папці.

3) Створіть п’ять HTML-документів (сторінок вебсайту) з розкладом уроків на кожний із цих днів тижня. До кожної сторінки додайте зверху її назву та знизу слово Головна, яке буде гіперпосиланням на головну сторінку. Збережіть сторінки сайту в папці з іменами 1.html; 2.html; 3.html; 4.html; 5.html.

4) У файлі index.html зробіть гіперпосилання на п’ять створених сторінок, а у файлах 1.html-5.html — на головну сторінку.

5) Відформатуйте тексти і графічні зображення.

6) Перевірте роботу сайту. Завершіть роботу за комп’ютером.

Комп'ютерне тестування

Виконайте тестове завдання 22 із автоматичною перевіркою результату.

Це матеріал з підручника Інформатика 8 клас Бондаренко (2021)